<ion-content>
  <ion-list inset>
    <div class="title-box">
      <img src="../../assets/imgs/logo.png">
    </div>

    <form [formGroup]="group" novalidate autocomplete="off">
      <ion-item>
        <ion-label>
          <ion-icon name="person" class="hst-color" item-start></ion-icon>
        </ion-label>
        <ion-input type="text" placeholder="{{'usernameTips' | translate}}" formControlName="username"></ion-input>
        <button icon-only ion-button clear color="danger" type="button" item-right (click)="clearUsername()">
          <ion-icon name="close"></ion-icon>
        </button>
      </ion-item>

      <ion-item>
        <ion-label>
          <ion-icon name="lock" class="hst-color" item-start></ion-icon>
        </ion-label>
        <ion-input *ngIf="!showPassword" placeholder="{{'passwordTips' | translate}}" type="password" formControlName="password"></ion-input>
        <ion-input *ngIf="showPassword" placeholder="{{'passwordTips' | translate}}" type="text" formControlName="password"></ion-input>
        <button icon-only ion-button clear [color]="showPassword ? 'calm' : 'dark'" type="button" item-right (click)="showPassword = !showPassword">
          <ion-icon name="eye"></ion-icon>
        </button>
      </ion-item>
    </form>
    <ion-item>
      <ion-label>
        <ion-icon name="home" class="hst-color" item-start></ion-icon>
      </ion-label>
      <ion-input placeholder="{{'instituionPlaceHolder' | translate}}" type="text" [(ngModel)]="InstitutionPrefix"></ion-input>
    </ion-item>

    <button class="login-btn" ion-button full color="light" style="font-size: 2.0rem;" (click)="login()" [disabled]="group.invalid">
      <ion-label color="hushitong">{{"login" | translate}}</ion-label>
    </button>

    <div class="login-bottom">
      <span (click)="signup()">{{"signup" | translate}}</span>
      <span (click)="forgetPassword()" class="forget-password">{{"forgetPassword" | translate}}</span>
    </div>
  </ion-list>
</ion-content>
